{% extends "base.html" %}
{% load static %}
{% load gravatar %}



{% block title %}Module to determine detergent-deposit binding strength{% endblock %}

{% block extrahead %}
<script type="text/javascript">
// the function used to resolve the identifier into an adjacency list
function resolve(fieldName){
   var spField = $('#id_'+fieldName);
   var identifier = $('#id_'+fieldName+'_identifier').val();
   var url = '/adjacencylist/'+escape(identifier);
   spField.val("Loading...");
   var jqxhr = $.get(url,function(structure) {
                     spField.val(structure);
                     spField.change();
                  })
               .on('error', function(j,t,e) { spField.val(t+'\n'+e); });
};
// convert an adjacency list into an image url
function adjlist2img(s) {
   adjlist = encodeURI(s);
   return "{% url 'draw-molecule' adjlist='ADJLIST' %}".replace('ADJLIST',adjlist);
}

$(document).ready(function() {
// prevent "enter" keypress in the form fields from submitting the form,
// but instead make them select the submit button.
   $(".identifier").bind("keypress", function(e) {
    var c = e.which ? e.which : e.keyCode;
    if (c == 13) {
       if ($("input:submit").is(":focus")) { return true;}
       else {
          $("input:submit:first").focus();
          return false;
       };
    }
   });
// add images to the right of all the text areas
   $("textarea").closest('tr').append("<img src='{% static 'img/moleculedraw-logo-small.png' %}'>");
// add onChange handlers to all the text areas to modify the image sources
   $("textarea").change( function() {
      var src = adjlist2img( $(this).val() );
      $(this).closest('tr').find('img').attr('src',src);
    });
// if you got to the page with pre-filled fields (eg. by hitting the back or forward button) the images will be stale
   $("textarea").each(function(){
      if ($(this).val()) { $(this).change(); }
      })
// end of $(document).ready(function() {
})
</script>

{% endblock %}

{% block page_title %}Module to determine detergent-deposit binding strength{% endblock %}

{% block page_body %}

<p>Please enter the detergent and deposit structures in the boxes below.</p>
<p>These are designed to accept SMILES, InChI, species names, etc. Go
 <a href="http://cactus.nci.nih.gov/chemical/structure" title="Chemical Identifier Resolver">here</a> to build customized structures and obtain the corresponding identifiers</p>

<form action="" method="POST">{% csrf_token %}
<table>
{{ form.as_table }}
<tr>
<th></th><td><input type="submit" value="Predict Binding Strength" name="submit"></td></tr>
</table>
</form>

{% if detergentA %}
<table>
<tr class="result">
<th>Abraham A parameter for detergent:</th>
<td style="padding: 10px;">{{detergentA|floatformat:3}}</td>
</tr>
<tr class="result">
<th>Abraham B parameter for detergent:</th>
<td style="padding: 10px;">{{detergentB|floatformat:3}}</td>
</tr>
<tr class="result">
<th>Abraham A parameter for deposit:</th>
<td style="padding: 10px;">{{depositA|floatformat:3}}</td>
</tr>
<tr class="result">
<th>Abraham B parameter for deposit:</th>
<td style="padding: 10px;">{{depositB|floatformat:3}}</td>
</tr>
<tr class="result">
<th>Log of the binding strength between detergent(donor) and dirt(acceptor) is:</th>
<td style="padding: 10px;">{{logKAB|floatformat:2}}</td>
</tr>
<tr class="result">
<th>Log of the binding strength between detergent(acceptor) and dirt(donor) is:</th>
<td style="padding: 10px;">{{logKBA|floatformat:2}}</td>
</tr>
</table>
{% endif %}

{% endblock %}
